<!DOCTYPE HTML>
<!--[if IE]>尽量不要用ie<!-->
<html>
	<head>
		<title>轻松学党史</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset="utf-8"/>
	</head>
	<style>
		body{
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(1.jpg) ;
			background-attachment: fixed;
		}
		#title{
			border:none;
			font-size:12em;
			color:red;
			font-weight: bold;
			text-align:center;
			border-radius:25px;
			margin-left:auto;
			margin-right:auto;
			margin-top:5%;
			margin-bottom: 5%;
		}
		#divNum{
			color:orange;
			text-align: center;
			font-size:5.5em;
			margin-bottom: 5%;
		}
		#start_{
			font-size:30px;
			margin-top: 30px;
		    display: inline-block;
			padding: 15px 150px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			background-color: #e67e22;
			color: #fff;
			border: none;
			border-radius: 10px;
		}
		#start_:hover{
			  background-color: #d35400;
		}
		#content1{
			position: absolute;
			left: 50%;
			top: 50%;
			text-align: center;
			transform: translate(-50%,-50%);
		}
		#content2{
			position: absolute;
			z-index: 999;
			width: 50%;
			height: 60%;
			left: 50%;
			top: 55%;
			border-radius: 10px;
			border: 2px solid #000;
			transform: translate(-50%,-50%);
			background-color: white;
			visibility: hidden;
			padding: 20px;
		}
		hr{
			margin-bottom: 10px;
		}
		#q_r{
			position: absolute;
			visibility: hidden;
		}
		#q_c{
			position: absolute;
			visibility: hidden;
		}
		#q_c p{
			line-height: 1.8em;
			font-size: 18px;
		}
		#q_r p{
			font-size: 16px;
		}
		#content2 h3{
			margin-top: 10px;
			margin-bottom: 0px;
		}
		#q_r,#q_c{
			margin-left: 15px;
			margin-right: 30px;
		}
		#btn{
			position: absolute;
			bottom: 30px; /* 距离底部的距离 */
			right: 30px;
		}
		#next{
		  display: inline-block;
		  padding: 6px 24px;
		  font-size: 16px;
		  font-weight: bold;
		  text-align: center;
		  text-decoration: none;
		  cursor: pointer;
		  background-color: #27ae60;
		  color: #fff;
		  border: none;
		  border-radius: 5px;
		}
		#next:hover {
		  background-color: #218c54;
		}
		#answer {
		  display: inline-block;
		  padding: 6px 24px;
		  font-size: 16px;
		  font-weight: bold;
		  text-align: center;
		  text-decoration: none;
		  cursor: pointer;
		  background-color: #e67e22;
		  color: #fff;
		  border: none;
		  border-radius: 5px;
		}
		#answer:hover {
		  background-color: #d35400;
		}
		#exit-button{
			display: inline-block;
			padding: 6px 24px;
			font-size: 16px;
			font-weight: bold;
			cursor: pointer; 
			background-color: #e74c3c;
			color: #fff;
			border: none;
			border-radius: 5px;
			position: absolute;
			bottom: 30px;
			left: 30px;
		}
		#exit-button:hover {
			background-color: #c0392b;
		}

		
	
	</style>
	<body>
		<div id="content1">
		<div id="title">轻松学党史</div>
		<div id="divNum">准备</div>
		<input id="start_" name="start_" onclick="Start(this);" type="button" value="开始"/>
		</div>
		<div id="content2">
			<h3 id="q_t">1.世界上第一个无产阶级政党的第一部组织章程是什么？</h2>
			<div id="q_r">
			 <p class="chose">A.国际工人协会共同章程</p> 
			 <p class="chose">B.俄国社会民主工党章程</p> 
			 <p class="chose">C.共产主义者同盟章程</p> 
			 <p class="chose">D.共产主义者同盟章程</p> 
			 <p id="q_r_anwser" style="font-weight: bold;"></p>
			 </div>
			<div id="q_c"> 
				<p>今年是中国共产党百年华诞。回望百年光辉历程，中国共产党成立以来的一百年极不平凡，是中国人民根本改变历史命运的一百年，
				 是中华民族迎来伟大复兴的一百年，是中国为全人类发展作出卓越贡献的一百年。中国共产党秉持为中国人民谋幸福、为中华民族谋复兴、
				 为人类社会谋大同的初心使命，团结带领全国各族人民浴血奋斗、英勇牺牲、奋发图强、顽强拼搏，逐步实现救国、兴国、富国、强国的奋斗目标，中华民族迎来了从站起来、富起来到强起来的伟大飞跃
				 ，中国共产党在中国这片古老的土地上，书写了人类发展史上惊天地、泣鬼神的壮丽史诗。</p>
			</div>
			 <div id="btn">
				 <button id="answer" onclick="getAnswer()" type="button">查看答案</button>
				 <button id="next" onclick="next()" type="button" >下一题 </button>
			 </div>
			 <button id="exit-button" onclick="exitQuiz()">退出答题</button>
		</div>
	</body>
	<script>
		var questionData = [
         {
         title: "在中国共产党的光辉历程中，我们应坚持什么的精神？",
         options: ["A.改革创新精神", "B.求实务虚精神", "C.以人为本精神", "D.团结协作精神"],
         type: 0,
         answer: "选项A。保持清醒头脑，坚持改革创新，不断推进党的事业和组织建设新的伟大工程。"
         },
         {
         title: "在党的奋斗历程中，何种精神是我们推动社会主义建设的强大动力？",
         options: ["A.改革创新精神", "B.求实务虚精神", "C.以人为本精神", "D.团结协作精神"],
         type: 0,
         answer: "选项A。党在建设社会主义时始终秉持改革创新的精神，推动国家不断发展壮大。"
         },
         {
         title: "在党的初心和使命中，哪种精神是我们始终不渝的追求？",
         options: ["A.改革创新精神", "B.求实务虚精神", "C.以人为本精神", "D.团结协作精神"],
         type: 0,
         answer: "选项C。党的初心和使命体现了以人为本的精神，为人民谋幸福是我们不变的宗旨。"
         },
         {
         title: "在党的历史长河中，哪种精神是我们战胜一切困难的强大力量？",
         options: ["A.改革创新精神", "B.求实务虚精神", "C.以人为本精神", "D.团结协作精神"],
         type: 0,
         answer: "选项D。团结协作精神是党战胜一切困难、取得一切胜利的不竭动力。"
         },
         {
         title: "中国共产党成立的具体日期是？",
         options: ["A.1920年7月1日", "B.1921年7月23日", "C.1922年8月15日", "D.1923年6月30日"],
         type: 0,
         answer: "选项B。中国共产党成立于1921年7月23日。"
         },
         {
         title: "中国共产党第一次全国代表大会在哪里举行？",
         options: ["A.上海", "B.北京", "C.武汉", "D.南昌"],
         type: 0,
         answer: "选项A。中国共产党第一次全国代表大会于1921年在上海举行。"
         },
         {
         title: "中国共产党的创建者是？",
         options: ["A.陈独秀", "B.李大钊", "C.陈毅", "D.毛泽东"],
         type: 0,
         answer: "选项A。陈独秀是中国共产党的创建者之一。"
         },
         {
         title: "中国共产党第一次全国代表大会的代表人数是？",
         options: ["A.11", "B.13", "C.16", "D.23"],
         type: 0,
         answer: "选项C。中国共产党第一次全国代表大会的代表人数是16人。"
         },
         {
         title: "中国共产党第一次全国代表大会的主要任务是？",
         options: ["A.制定党纲", "B.选举中央领导机构", "C.制定军事计划", "D.宣告独立"],
         type: 0,
         answer: "选项B。中国共产党第一次全国代表大会的主要任务是选举中央领导机构。"
         },
         {
         title: "中国共产党第一次全国代表大会选举产生的中央领导机构是？",
         options: ["A.中央委员会", "B.中央政治局", "C.中央纪律检查委员会", "D.中央军委"],
         type: 0,
         answer: "选项A。中国共产党第一次全国代表大会选举产生了中央委员会。"
         },
         {
         title: "中国共产党第一次全国代表大会通过的党的第一个纲领是？",
         options: ["A.《共产党宣言》", "B.《中国共产党纲领》", "C.《告全党同志书》", "D.《湖湘会盟约》"],
         type: 0,
         answer: "选项C。中国共产党第一次全国代表大会通过的是《告全党同志书》。"
         },
         {
         title: "中国共产党第二次全国代表大会在何时举行？",
         options: ["A.1923年", "B.1924年", "C.1925年", "D.1926年"],
         type: 0,
         answer: "选项C。中国共产党第二次全国代表大会于1925年举行。"
         },
         {
         title: "中国共产党第二次全国代表大会的主要任务是？",
         options: ["A.制定新的党纲", "B.发动农民运动", "C.制定土地法", "D.加强党的组织建设"],
         type: 0,
         answer: "选项D。中国共产党第二次全国代表大会的主要任务是加强党的组织建设。"
         },
         {
         title: "中国共产党第三次全国代表大会在何时召开？",
         options: ["A.1926年", "B.1927年", "C.1928年", "D.1929年"],
         type: 0,
         answer: "选项B。中国共产党第三次全国代表大会于1927年召开。"
         },
         {
         title: "中国共产党第三次全国代表大会的重要决定是？",
         options: ["A.发动北伐", "B.全面内战", "C.成立红军", "D.开展土地革命"],
         type: 0,
         answer: "选项B。中国共产党第三次全国代表大会决定全面内战。"
         },
         {
         title: "中国共产党第四次全国代表大会在何时召开？",
         options: ["A.1930年", "B.1931年", "C.1932年", "D.1933年"],
         type: 0,
         answer: "选项C。中国共产党第四次全国代表大会于1932年召开。"
         },
         {
         title: "中国共产党第四次全国代表大会的主要任务是？",
         options: ["A.总结土地革命经验", "B.制定新的军事计划", "C.加强党风廉政建设", "D.发展革命统一战线"],
         type: 0,
         answer: "选项A。中国共产党第四次全国代表大会的主要任务是总结土地革命经验。"
         },
          {
          title: "党的十九大的召开时间是？",
          options: ["2016年", "2017年", "2018年", "2019年"],
          type: 0,
          answer: "C"
          },
          {
          title: "中国共产党的主要革命道路是？",
          options: ["武装夺取", "和平演变", "国际援助", "政变"],
          type: 0,
          answer: "A"
          },
		  {
		  title: "简述中国共产党的创建背景和目的。",
		  options:[],
		  type: 1,
		  answer: "中国共产党是在中国工人阶级和马克思主义者的领导下，在中国共产主义运动的推动下，在中国各族人民群众的共同努力下，经过艰苦的奋斗，于1921年7月23日在上海成立的。党的宗旨是实现共产主义社会制度，最终实现共产主义的共有制度，以消灭剥削，实现人类的共同富裕。"
		  },
		  {
		  title: "解释中国共产党的基本路线。",
		  options:[],
		  type: 1,
		  answer: "中国共产党的基本路线是指在社会主义初级阶段，总任务是以经济建设为中心，坚持四项基本原则，坚持社会主义道路，发展社会主义民主，加强党同人民群众的联系，加强党同军队的联系，加强党同各民主党派、各人民团体的联系，加强党同社会主义国家的联系，坚持党风廉政建设和反腐败斗争，加强党同共产主义卫士的联系。"
		  },
		  {
		  title: "简要介绍中国共产党的历史发展阶段。",
		  options:[],
		  type: 1,
		  answer: "中国共产党的历史发展阶段主要包括：初期的创建和艰苦奋斗阶段（1921年-1937年），抗日战争和解放战争时期（1937年-1949年），新中国成立和社会主义初期阶段（1949年-1978年），改革开放和社会主义现代化建设阶段（1978年至今）。每个阶段都有其特定的历史背景和党的重要任务。"
		  },
		  {
		  title: "谈谈中国共产党的主要领导制度。",
		  options:[],
		  type: 1,
		  answer: "中国共产党的主要领导制度是民主集中制。民主集中制是党内政治生活的总原则，即个别服从组织，少数服从多数，下级服从上级，全党服从中央。党内实行集体领导和个人分工负责相结合的制度，坚持集体领导和个别负责相结合，保证党的决定在全党有效贯彻执行。"
		  },
		  {
		  title: "简述中国共产党的最终目标。",
		  options:[],
		  type: 1,
		  answer: "中国共产党的最终目标是实现共产主义社会制度。共产主义是社会主义最高阶段的制度，其基本特征是实现生产资料的共产制，即生产资料属于全体社会成员共同所有，消灭一切剥削和阶级差别，建立按需分配的社会制度。共产主义追求人类的共同富裕，消除社会的不平等和贫富差距，最终实现全人类的共同繁荣。"
		  }
		];
		var arrData = [], timerID = 0;
		var flag = 0; //这个字段表示不能重复点击开始按钮。如果值为1表示还未结束上一次摇号
		var num = 0; //代表随便出来的数
		<!--随机的范围-->
		for(var i = 1; i <=questionData.length; i++){
			arrData[i - 1] = i;
		}
		function $(id){  			//这个函数调用比较多 单独把这个 document.getElementById(id)提取出来了
			return document.getElementById(id);
		}
		function Start(btn)
		{
			if(flag==1){	//判断是否正在执行一次随机抽取
				return;
			}
			
			flag = 1;
			timerID = setInterval(function(){		//设置30毫秒的定时执行。效果为一直在滚动闪烁的摇号数字 timerID是为了在摇号结束取消掉
			num = parseInt(Math.random() * (arrData.length)); //通过随机函数和摇号区间所在的数组长度得到一个随机数
			$("divNum").innerHTML = arrData[num]; //将随机数显示到页面上。这个index是一个属性值。可暂时存放一些临时值
			}, 30);
			setTimeout(function() { //设置一个延时1秒执行的函数去取消掉数字闪烁的效果
				flag =0; //状态值设置为0。即可开始下一次摇号
				if(timerID > 0){ 	// 将上面那个每30秒执行一次的定时函数取消掉
				clearInterval(timerID);
				timerID = 0;
				}
			},1000);
			setTimeout(function(){		//设置一个延时1.2秒执行显示答题界面
					var content = questionData[num]; //获取到当前这个问题对象(包含了title:题目,options[]:ABCD选项,type为0代表选择题,1为简单题,answer为答案)
					$("q_t").innerHTML = (num+1) +" . "+content.title; //获取到题目显示
					if(content.type == 0){ //判断是否为选择题 选择题需要显示选项
						$("q_r").style.visibility = "visible";  
						var choses = document.getElementsByClassName("chose"); //获取到选项对象数组
						for(i=0;i<choses.length;i++){ 		//循环选项对象数组赋值
							choses[i].innerHTML = content.options[i]; //将选项的值显示到界面
						}
					}
					$("content2").style.visibility = "visible";//显示答题界面
			},1200);
		}
		function getAnswer(){  //显示答案的函数
			if(questionData[num].type == 0){
				$("q_r_anwser").innerHTML = "答案: " + questionData[num].answer;
				}
				else{
					$("q_c").innerHTML = "<p>"+"答案: "+ questionData[num].answer+"</p>";
					$("q_c").style.visibility = "visible";
				}
		}
		function next(){	//下一题
			$("divNum").innerHTML ="准备";
			hidden();
			$("q_r_anwser").innerHTML="";
			Start($("start_"));
		}
		function exitQuiz(){ //退出
			$("divNum").innerHTML ="准备";
			hidden();
			$("q_r_anwser").innerHTML="";
		}
		
		function hidden(){ 
			$("q_r").style.visibility = "hidden";
			$("q_c").style.visibility = "hidden";
			$("content2").style.visibility = "hidden";
		}
		
	</script>
</html>
